<template>
  <div class="equipment-bottom-right">
    <div class="equipment-title" style="width: 50%; text-align: center">
      不良项分布
    </div>
    <Tags :value="dayNumber" :list="dayList" @change="onChangeDay" />
    <div ref="pieRef" id="pie"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import { useRoute } from "vue-router";
// import { getEquipmentNGDatas } from "@/api/large-screen";
import { getResize } from "@/utils/index.ts";
import * as echarts from "echarts";
import Tags from "./tags.vue";

// ref
const pieRef = ref(null);

const route = useRoute();
const equipmentId = ref(route?.query?.id);

const dayNumber = ref(7);
const dayList = [
  {
    name: "最近半个月",
    value: 15,
  },
  {
    name: "最近一周",
    value: 7,
  },
];

const onPie = async () => {
  const myChart =
    echarts.getInstanceByDom(pieRef.value) || echarts.init(pieRef.value);
  // const res = await getEquipmentNGDatas({
  //   equipmentId: equipmentId.value,
  //   dayNumber: dayNumber.value,
  // });
  // const data = res?.dataDetail || [];
  // const total = res?.total || "0";
  const data = new Array(5).fill().map((_, index) => ({
    name: `不良项${index + 1}`,
    ratio: `${Math.floor(Math.random() * 100)}%`,
    value: Math.floor(Math.random() * 100),
  }));
  const total = data.reduce(
    (pre, cur) => pre + Number(cur.ratio.replace("%", "")),
    0
  );
  const color = [
    "#1c8eee",
    "#366ff0",
    "#26c73c",
    "#f1b623",
    "#c451df",
    "#A0CE3A",
    "#31C5C0",
    "#1E9BD1",
    "#0F347B",
    "#585247",
    "#7F6AAD",
    "#009D85",
  ];
  const option = {
    color,
    tooltip: {
      trigger: "item",
      formatter: "{b}：{c}",
      backgroundColor: "rgba(0, 0, 0, 0.5)", // 半透明黑色背景
      borderColor: "rgba(255, 255, 255, 0)", // 边框
      textStyle: {
        color: "#fff", // 文字颜色
      },
    },
    title: {
      text: "不良项总数",
      subtext: total,
      textStyle: {
        fontSize: 14,
        color: "#f2f2f2",
      },
      subtextStyle: {
        fontSize: 14,
        color: "#fff",
      },
      left: "69.3%", // 与饼图center的x坐标一致
      top: "48%", // 与饼图center的y坐标一致
      // x: 'center',
      // y: 'center',
      textAlign: "center",
      textVerticalAlign: "middle",
    },
    legend: {
      itemHeight: 14,
      itemWidth: 14,
      icon: "rect",
      orient: "vertical",
      top: "center",
      left: "5%",
      //图例在左，文字在右
      align: "left",
      //设置图例的间隔
      itemGap: 20,
      formatter: (name) => {
        if (data.length) {
          const item = data.filter((item) => item.name === name)[0];
          return `{name|${name}}{value| ${item.ratio}}`;
        }
      },
      textStyle: {
        align: "left",
        color: "#f2f6fc",
        verticalAlign: "middle",
        rich: {
          name: {
            fontSize: 16,
          },
          value: {
            fontSize: 16,
            // color: '#fff'
          },
        },
      },
      data: data,
    },
    series: [
      {
        name: "外边框",
        type: "pie",
        clockwise: false, //顺时加载
        tooltip: {
          // 添加这个配置
          show: false, // 完全禁用该系列的提示框
        },
        emphasis: {
          disabled: true, // 完全禁用
          // scale: false, //鼠标移入变大
          // scaleSize: 1.05
        }, //鼠标移入变大
        radius: ["80%", "80%"],
        center: ["70%", "50%"],
        label: {
          show: false,
        },
        emphasis: {
          disabled: true,
        },
        data: [
          {
            value: 9,
            name: "",
            itemStyle: {
              borderWidth: 2,
              borderColor: "#0b5263",
            },
          },
        ],
      },
      // 数据
      {
        name: "",
        radius: ["45%", "76%"],
        center: ["70%", "50%"],
        type: "pie",
        roseType: true,
        label: {
          show: false,
          formatter: "{d}%",
          fontSize: 14,
          position: "outside",
        },
        labelLine: {
          show: false,
          length: 30,
          length2: 55,
        },
        data: data,
      },
      {
        name: "内边框",
        radius: ["40%", "39%"],
        center: ["70%", "50%"],
        type: "pie",
        tooltip: {
          // 添加这个配置
          show: false, // 完全禁用该系列的提示框
        },
        emphasis: {
          disabled: true, // 完全禁用
          // scale: false, //鼠标移入变大
          // scaleSize: 1.05
        },
        label: {
          show: false,
          position: "center",
          formatter: function (params) {
            return `${Number(params.value).toFixed(1)}%`;
          },
          color: "#fff",
          fontSize: 30,
        },
        labelLine: {
          show: false,
        },
        animation: false,
        data: [
          {
            value: 1,
            itemStyle: {
              color: "rgba(250,250,250,0.3)",
            },
          },
        ],
      },
    ],
  };
  getResize(option, myChart);
};

const onChangeDay = (val) => {
  dayNumber.value = val;
  onPie();
};

watch(route, (newVal) => {
  equipmentId.value = newVal?.query?.id;
  onPie();
});

onMounted(() => {
  onPie();
});
</script>

<style lang="scss" scoped>
$height: 410px;
#pie {
  width: 100%;
  height: calc($height - 60px);
}
</style>
